<template>
  <div class="about">
    <h1>This is an about page</h1>
    {{ person }}
    <button @click="person.age++">修改age</button>
    <br />
    {{ name }}--{{ age }}
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "AboutView",
});
</script>

<script lang="ts" setup>
import { ref, toRefs } from "vue";

//watch监听2:ref对象 值是一个对象类型
let person = ref({
  name: "laowang",
  age: 18,
});

/* 如果正常从ref对象中结构的化，得到的不是ref对象，没有响应式 */
const { name, age } = toRefs(person.value);
console.log(name, age);
</script>
